<template>
    <div class="Register">
        <PageHeader
            :title="$route.meta.title"
            :needLeft="true"
            :needRight="false"
            rightText="登录"
            @headerRightClick="toLogin"
        />
        <div class="Register-country">
            <p>国家和地区</p>
            <div class="Register-country-china">
                <p>中国</p>
                <p><img src="../assets/img/PersonalCenterimg/ic_change.png" alt=""></p>
            </div>
        </div>
        <div class="Register-phone">
            <van-form @submit="onSubmit">
                <div class="Register-phone-username">
                <van-field
                    v-model="username"
                    name="username"
                    label="用户名"
                    placeholder="用户名"
                    :rules="[{ required: true, message: '请填写用户名' }]"
                >
                </van-field>
                <van-field
                    v-model="password"
                    type="password"
                    name="password"
                    label="密码"
                    placeholder="密码"
                    :rules="[{ required: true, message: '请填写密码' }]"
                >
                </van-field>
                </div>
                <div style="margin: 16px;">
                    <van-button round block type="info" native-type="submit">
                        注册
                    </van-button>
                </div>
            </van-form>
        </div>
        <div class="Login-share">
            <p>登录代表你已同意<span>用户协议</span>和<span>隐私政策</span></p>
        </div>
        <div class="danger-msg notice-box" v-if="userDanger">用户名已存在</div>
        <div class="congratulation-msg notice-box" v-if="userCongratulation">注册成功</div>
    </div>
</template>

<script>
import PageHeader from '@/components/PageHeader'
import { createNamespacedHelpers } from 'vuex'
const user = createNamespacedHelpers('user')
export default {
    name: 'register',
    data () {
        return {
            username: '',
            password: '',
            userDanger: false,
            userCongratulation: false
        }
    },
    computed: {
        // ...user.mapState(['userRepeat'])
    },
    methods: {
        ...user.mapActions(['registerAsync']),
        onSubmit (values) {
            // console.log('submit', values)
            this.registerAsync(values)
                .then(res => {
                    if (res) {
                        this.userCongratulation = true
                        setTimeout(() => {
                            this.userCongratulation = false
                            this.$router.push('/login')
                        }, 2000)
                    } else {
                        this.userDanger = true
                        setTimeout(() => {
                            this.userDanger = false
                        }, 2000)
                    }
                })
        },
        toLogin () {
            this.$router.push('/login')
        }
    },
    components: {
        PageHeader
    }
}
</script>

<style lang="scss">
.Register {
    width: 100%;
    height: 100%;
    background: #f5f5f5f5;
    padding: 15px 12px 1px 10px;
    box-sizing: border-box;
    background: url(../assets/img/PersonalCenterimg/background.jpg);
    .Register-country{
        width: 100%;
        height: 45px;
        margin-bottom: 14px;
        margin-top: 50%;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 10px;
        background: #fff;
        border: 1px solid #f5f5f5;
        border-radius: 5px;
        box-shadow: 0 3px 5px -4px rgba(0,0,0,.4) inset, -1px 0 3px -2px rgba(0,0,0,.1) inset;
            p{
            font-size: 15px;
            color: #666;
        }
        .Register-country-china {
            width: 50px;
            height: 45px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            & p:nth-last-child(1) {
                width: 12px;
                height: 12px;
                img {
                    width: 12px;
                    height: 12px;
                }
            }
        }
    }
    .Register-phone {
        width: 100%;
        min-height: 91px;
        // background: #fff;
        border-top: 1px solid #f5f5f5;
        border-bottom: 1px solid #f5f5f5;
        border-radius: 5px;
        box-shadow: 0 3px 5px -4px rgba(0,0,0,.4) inset, -1px 0 3px -2px rgba(0,0,0,.1) inset;
        .Register-phone-username {
            box-shadow: 0 3px 5px -4px rgba(0,0,0,.4) inset, -1px 0 3px -2px rgba(0,0,0,.1) inset;
            border-radius: 12px;
            overflow: hidden;
        }
    }
    .Login-share {
        width: 100%;
        height: 71px;
        // border: 1px solid Red;
        .Login-share-img {
            width: 100%;
            height: 40px;
        }
        p {
            position: absolute;
            bottom: 0;
            left: 15%;
            // width: 275px;
            // height: 30px;
            font-size: 14px;
            color: #7f7f7f;
            line-height: 14px;
            text-align: center;
            padding-bottom: 20px;
            span {
                color: #5079d9;
                margin: 0 4px;
            }
        }
    }
    .notice-box {
        position: absolute;
        top: 150px;
        left: calc(50% - 100px);
        width: 200px;
        height: 50px;
        font-size: 30px;
        line-height: 50px;
        text-align: center;
        background-color: #fff;
        border: 2px solid #000;
        border-radius: 8px;
        font-weight: bold;
        &.danger-msg {
            color: #f00;
        }
        &.congratulation-msg {
            color: lawngreen;
        }
    }
}
</style>
